<template>
  <div class="root">
    <div class="card">
      <div class="card-one">
        <InformationCard
          icon="el-icon-monitor"
          title="昨日成交量"
          :data="volume + ''"
          startColor="#a2c1d3"
          endColor="#d75cc6"
        />
      </div>
      <div class="card-two">
        <InformationCard
          icon="el-icon-monitor"
          title="昨日销售额"
          :data="'￥' + moneySum"
          startColor="#8d798e"
          endColor="#fea994"
        />
      </div>
      <div class="card-three">
        <InformationCard
          icon="el-icon-monitor"
          title="当前未配送"
          :data="undelivered + ''"
          startColor="#6A9113"
          endColor="#141517"
        />
      </div>
    </div>
    <div id="bar-charts"></div>
    <div id="sales"></div>
  </div>
</template>
<script>
import InformationCard from "@/components/InformationCard";
import {
  getCard,
  getSupplyWeekOrders,
  getSupplyWeekMoney,
} from "@/api/orderApi";
export default {
  components: {
    InformationCard,
  },
  data() {
    return {
      moneySum: 0,
      undelivered: 0,
      volume: 0,
      dataArr: [],
      loading: null,
      flag1 : false,
      flag2 : false,
      flag3 : false
    };
  },
  created() {
    this.loading = this.$loading({
      lock: true,
      text: "加载中",
      spinner: "el-icon-loading",
      background: "rgba(0, 0, 0, 0.7)",
    });
    getCard()
      .then((res) => {
        if (res.code == 0) {
          this.flag1 = true
          if(this.flag1 && this.flag2 && this.flag3){
            this.loading.close()
          }
          this.moneySum = res.data.moneySum;
          this.undelivered = res.data.undelivered;
          this.volume = res.data.volume;
        } else {
          this.$message.error(res.message);
        }
      })
      .catch((err) => {
        console.log(err);
      });
  },
  mounted() {
    let arr = [];
    let date = new Date();
    //date.setDate(date.getDate() - 1);
    for (let i = 0; i < 7; i++) {
      let str = "";
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      if (month < 10) {
        month = "0" + month;
      }
      if (day < 10) {
        day = "0" + day;
      }
      str = year + "-" + month + "-" + day;
      arr.push(str);
      date.setDate(date.getDate() - 1);
    }
    this.dataArr = arr;
    this.barChartsEcharts();
    this.salesEcharts();
  },
  methods: {
    barChartsEcharts() {
      getSupplyWeekOrders().then((res) => {
        if (res.code == 0) {
          this.flag2 = true
          if(this.flag1 && this.flag2 && this.flag3){
            this.loading.close()
          }
          let cancelOrders = [];
          let commitOrders = [];
          let cancelRate = [];
          res.data.forEach((item) => {
            cancelOrders.push(item.cancelOrder);
            commitOrders.push(item.commitOrder);
            if (item.cancelOrder + item.commitOrder > 0) {
              cancelRate.push(
                (
                  item.cancelOrder /
                  (item.cancelOrder + item.commitOrder)
                ).toFixed(4) * 100
              );
            } else {
              cancelRate.push(0);
            }
            let myChart = this.$echarts.init(
              document.getElementById("bar-charts")
            );
            let option = {
              title: {
                text: "订单周统计",
              },
              tooltip: {
                trigger: "axis",
                axisPointer: {
                  type: "cross",
                  crossStyle: {
                    color: "#999",
                  },
                },
                formatter: "{a0}: {c0}单<br />{a1}: {c1}单 <br /> {a2}: {c2}%",
              },
              toolbox: {
                feature: {
                  magicType: { show: true, type: ["line", "bar"] },
                  restore: { show: true },
                  saveAsImage: { show: true },
                },
              },
              legend: {
                data: ["订单提交量", "退单量", "退单率"],
              },
              xAxis: [
                {
                  type: "category",
                  data: this.dataArr.reverse(),
                  axisPointer: {
                    type: "shadow",
                  },
                },
              ],
              yAxis: [
                {
                  type: "value",
                  name: "数量",
                  // min: 0,
                  // max: 2000,
                  // interval: 200,
                  axisLabel: {
                    formatter: "{value}",
                  },
                },
                {
                  type: "value",
                  name: "退单率",
                  min: 0,
                  max: 100,
                  interval: 10,
                  axisLabel: {
                    show: true,
                    interval: "auto",
                    formatter: "{value} %",
                  },
                },
              ],
              series: [
                {
                  name: "订单提交量",
                  type: "bar",
                  data: commitOrders,
                },
                {
                  name: "退单量",
                  type: "bar",
                  data: cancelOrders,
                },
                {
                  name: "退单率",
                  type: "line",
                  yAxisIndex: 1,
                  itemStyle: {
                    normal: {
                      label: {
                        show: true,
                        position: "top",
                        formatter: "{b}\n{c}%",
                      },
                    },
                  },
                  data: cancelRate,
                },
              ],
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
          });
        }
      });
      // 基于准备好的dom，初始化echarts实例
    },
    salesEcharts() {
      getSupplyWeekMoney().then((res) => {
        if (res.code == 0) {
          this.flag3 = true
          if(this.flag1 && this.flag2 && this.flag3){
            this.loading.close()
          }
          let money = [];
          res.data.forEach((item) => {
            money.push(item);
          });
          let sales = this.$echarts.init(document.getElementById("sales"));
          let option = {
            title: {
              text: "销售额周统计",
            },
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "cross",
                crossStyle: {
                  color: "#999",
                },
              },
              formatter: "{b0}: {c0}元",
            },
            toolbox: {
              feature: {
                magicType: { show: true, type: ["line", "bar"] },
                restore: { show: true },
                saveAsImage: { show: true },
              },
            },
            xAxis: {
              type: "category",
              data: this.dataArr.reverse(),
            },
            yAxis: {
              type: "value",
              axisLabel: {
                formatter: "{value} 元",
              },
            },
            series: [
              {
                data: money,
                type: "bar",
              },
            ],
          };
          sales.setOption(option);
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
$cardOneMargin: 2% 0 0 5%;
$cardTwoMargin: 2% 0 0 4%;
$cardThreeMargin: 2% 0 0 4%;
$barChartsWidth: 90%;
$barChartsHeight: 25%;
.root {
  position: relative;
  height: 1000px;
  .card {
    height: 35%;
    .card-one {
      width: 25%;
      margin: $cardOneMargin;
      float: left;
    }
    .card-two {
      float: left;
      width: 25%;
      margin: $cardTwoMargin;
    }
    .card-three {
      float: left;
      width: 25%;
      margin: $cardThreeMargin;
    }
  }
  #bar-charts {
    width: $barChartsWidth;
    height: $barChartsHeight;
    //margin: $barChartsMargin;
    position: absolute;
    top: 25%;
  }
  #sales {
    width: $barChartsWidth;
    height: 35%;
    position: absolute;
    top: 50%;
  }
}
</style>
